<template>
  <div id="content">
    <van-card
      lazy-load
      :price="`${price}`"
      :desc="`${time}`"
      :title="`${name}`"
      :thumb="`${imgname}`"
    >
      <template #footer class="fo">
        <!-- <van-checkbox
            v-model="checked"
            checked-color="#ffd030"
          ></van-checkbox> -->
        <div class="fo">
          <van-button size="mini" round text="-" @click="sub"></van-button>
          <p ref="num">{{ num }}</p>
          <van-button size="mini" round text="+" @click="add"></van-button>
        </div>
      </template>
    </van-card>
  </div>
</template>

<script>
import { shopAdd } from '@/api/request'
export default {
  props: ["price", "time", "name", "imgname", "num"],
  data () {
    return {
      nick: ''
    }
  },
  watch: {
    name: {
      handler(newVal, oldVal) {
        this.nick = newVal
      },
      immediate: true,
    }
  },
  methods: {
    add () {
        this.$refs.num.innerHTML = parseInt(this.$refs.num.innerHTML) + 1
        shopAdd ({ uid: this.$store.state.user.uid, name: this.nick, num:  this.$refs.num.innerHTML})
    },
    sub () {
        this.$refs.num.innerHTML = parseInt(this.$refs.num.innerHTML) - 1
        if(parseInt(this.$refs.num.innerHTML) < 1) {
          this.$refs.num.innerHTML = 1
        }
        shopAdd ({ uid: this.$store.state.user.uid, name: this.nick, num:  this.$refs.num.innerHTML})
    }
  }
};
</script>

<style lang="scss" scoped>
#content {
    width: 100%;
    margin: 0 auto;
}
.van-card {
  background: none;
  border-bottom: 1px solid rgb(236, 233, 233);
  height: 110px;
  padding: 0;
  margin-bottom: 10px;

  .van-card__footer {
    .van-checkbox {
      position: relative;
      bottom: 70px;
      left: 90px;
    }
    display: flex;
    justify-content: flex-end;
    div {
      display: flex;

      .van-button {
        // background-color: #ffd030;
        height: 15px;
        width: 35px;
        color: black;
      }
      p {
        display: inline-block;
        margin: 0 8px;

        text-align: center;

        font-size: 16px;
      }
    }
  }
}
</style>
